import {defineStore} from "pinia";
import {darkTheme} from "naive-ui";
import {nextTick} from "vue";



//返回值：函数，得到容器示例

export const useAppStore = defineStore('app', {
    /**
     * 加入插件后 持久化开启
     */
    persist: true,
    /**
     * 全局状态
     * 函数式 在服务端渲染时避免交叉请求导致数据状态污染
     * 箭头函数 方面TS类型推导
     */
    state: () => {
        return {
            reloadFlag: true,
            collapsed: false,
            sideMode:'menu',
            theme: 'light',
            aliveKeys: {
                route:{
                    name:''
                }
            },
        }
    },
    /**
     * 封装计算属性，有缓存功能
     */
    getters: {},
    /**
     * 封装业务逻辑，修改state
     */
    actions: {
        async reloadPage() {
            window.$loadingBar.start()
            this.reloadFlag = false
            await nextTick()
            this.reloadFlag = true

            setTimeout(() => {
                document.documentElement.scrollTo({ left: 0, top: 0 })
                window.$loadingBar.finish()
            }, 100)
        },
        switchCollapsed() {
            this.collapsed = !this.collapsed
        },
        switchTheme() {
            if (this.theme === 'light') this.theme = 'dark'
            else this.theme = 'light'
        },
        setAliveKeys(key:any, val:any) {
            // @ts-ignore
            this.aliveKeys[key] = val
        },
    },
})
